<template>
  <div
    class="box"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <div class="header">
      <i class="iconfont icon-fanhui"></i>
      <p>注册页</p>
    </div>
    <img src="../../assets/images/bg3.png" alt="" class="bg" />
    <el-form
      :label-position="labelPosition"
      label-width="80px"
      :model="formLabelAlign"
      :rules="rules"
      ref="formLabelAlign"
    >
      <el-form-item class="logo">
        <img src="../../assets/images/radio.png" alt="" />
        <img :src="appLogo" alt="" />
      </el-form-item>
      <el-form-item class="referrer">
        推荐人：
        <span>{{ nickName }}</span>
      </el-form-item>
      <el-form-item prop="name">
        <el-input
          v-model="formLabelAlign.name"
          placeholder="请输入注册手机号"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item prop="region">
        <el-input
          v-model="formLabelAlign.region"
          placeholder="请设置登录密码"
          show-password
        ></el-input>
      </el-form-item>
      <el-form-item prop="type">
        <el-input v-model="formLabelAlign.type" placeholder="请输入短信验证码">
        </el-input>
        <div class="code" v-if="code" @click="get">获取验证码</div>
        <div class="code" v-else @click="gain">
          重新获取(<span>{{ num }}</span
          >)s
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="sub('ruleForm')">注册</el-button>
      </el-form-item>
      <div class="down">
        <el-button round @click="selectDownloadHtml('ios')">ios下载</el-button>
        <el-button round @click="selectDownloadHtml('Android')"
          >Android下载</el-button
        >
      </div>
    </el-form>
  </div>
</template>

<script>
import { toRegisterNew, selectDownloadHtml, registerYzm } from '../../local/api'
import qs from 'qs'

export default {
  data() {
    return {
      labelPosition: 'top',
      formLabelAlign: {
        name: '',
        region: '',
        type: ''
      },
      rules: {
        name: [{ required: true, validator: this.ValidPhone, trigger: 'blur' }],
        region: [{ required: true, validator: this.ValidPwd, trigger: 'blur' }],
        type: [{ required: true, validator: this.ValidCode, trigger: 'blur' }]
      },
      code: true,
      num: 30,
      sign: '',
      iosUrl: '',
      AndroidUrl: '',
      key: '',
      parentId: '',
      oBrandId: '',
      appLogo: '',
      nickName: ''
    }
  },
  mounted() {
    console.log(JSON.parse(localStorage.getItem('data')))
    this.key = JSON.parse(localStorage.getItem('data')).key
    this.parentId = JSON.parse(localStorage.getItem('data')).userId
    this.oBrandId = JSON.parse(localStorage.getItem('data')).oBrandId
    this.appLogo = JSON.parse(localStorage.getItem('data')).appLogo
    this.nickName = JSON.parse(localStorage.getItem('data')).nickName

    console.log(
      this.key,
      this.parentId,
      this.oBrandId,
      this.appLogo,
      this.nickName,
      '8987'
    )
  },
  methods: {
    // 注册
    async sub() {
      // 加密
      this.sign = this.$md5(
        'oBrandId=' +
          this.oBrandId +
          '&parentId=' +
          this.parentId +
          '&phone=' +
          this.formLabelAlign.name +
          '&pwd=' +
          this.formLabelAlign.region +
          '&verificationCode=' +
          this.formLabelAlign.type +
          '&key=' +
          this.key
      )

      console.log(this.sign)
      this.loading = true
      // 发送请求
      const data = await toRegisterNew(
        qs.stringify({
          phone: this.formLabelAlign.name, // this.formLabelAlign.name
          pwd: this.formLabelAlign.region, // this.formLabelAlign.region
          verificationCode: this.formLabelAlign.type, // this.formLabelAlign.type
          oBrandId: this.oBrandId,
          parentId: this.parentId,
          key: this.key,
          sign: this.sign
        })
      )
      this.$message(`${data.msg}`)
      console.log(data)
    },
    // 下载
    async selectDownloadHtml(phone) {
      const data = await selectDownloadHtml(
        qs.stringify({ oBrandId: this.oBrandId })
      )
      console.log(data)
      this.iosUrl = data.data.iosUrl
      this.AndroidUrl = data.data.androidUrl
      if (phone === 'ios') {
        // window.location.href = this.iosUrl
        this.$router.push({ path: './ios', query: { ios: this.iosUrl } })
      } else {
        // window.location.href = this.AndroidUrl
        this.$router.push({
          path: './Android',
          query: { androidUrl: this.AndroidUrl }
        })
      }
    },
    // 发送验证码
    async get() {
      this.code = !this.code
      const time = setInterval(() => {
        this.num--
        if (this.num === 0) {
          clearInterval(time)
        }
      }, 1000)
      const data = await registerYzm(
        qs.stringify({
          phone: this.formLabelAlign.name,
          oBrandId: this.oBrandId
        })
      )
      console.log(data)
    },
    // 重新获取验证码
    async gain() {
      if (this.num === 0) {
        this.num = 30
        const data = await registerYzm(
          qs.stringify({
            phone: this.formLabelAlign.name,
            oBrandId: this.oBrandId
          })
        )
        const time = setInterval(() => {
          this.num--
          if (this.num === 0) {
            clearInterval(time)
          }
        }, 1000)
      }
    }
  }
}
</script>
<style lang="less" scoped>
.box {
  height: 100%;
}
.bg {
  width: 100%;
  height: 100%;
  margin-top: 40px;
}
.header {
  position: absolute;
  top: 0;
  height: 40px;
  width: 100%;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 40px;
  i {
    position: absolute;
    left: 5px;
  }
}
.el-form {
  background-color: #fff;
  width: 80%;
  // margin: 30% auto;
  border-radius: 15px;
  // padding: 30px 20px;
  box-shadow: 1px 0px 25px #a1bff7;
  position: absolute;
  top: 20%;
  left: 50%;
  margin-left: -40%;
  /deep/.el-form-item__label {
    line-height: 0;
  }
  /deep/.el-input__inner {
    margin-top: 5px;
  }
  /deep/.el-input__suffix {
    line-height: 50px;
  }
  .logo {
    img {
      width: 100px;
      height: 100px;
      position: absolute;
      top: -90px;
      left: 50%;
      margin-left: -50px;
    }
  }
  .referrer {
    text-align: center;
  }
  .el-form-item {
    position: relative;
    margin: 20px;
    .code {
      position: absolute;
      top: 5px;
      right: 8px;
      color: #4481fe;
    }
  }
  .el-button {
    width: 100%;
  }
  .down {
    display: flex;
    justify-content: space-between;
    margin: 15px 0 20px 0;
    .el-button {
      margin: 20px;
      width: 50%;
      color: #409eff;
      border: 1px solid#409EFF;
    }
  }
}
</style>
